<template>
    <el-form  v-if="enable" ref="form" class="act-form" label-width="100px">
      <el-form-item label="允许启动:">
         <el-radio v-model="radio" value="1">所有成员</el-radio>
          <el-radio v-model="radio" value="2">指定成员</el-radio>
      </el-form-item>
      <el-form-item v-if="radio === '2'" label="添加用户:">
        <user-select v-model="candidateStarterUsers"></user-select>
      </el-form-item>
       <el-form-item v-if="radio === '2'" label="添加角色:">
        <role-select v-model="candidateStarterGroups"></role-select>
      </el-form-item>
    </el-form>
</template>
<script>
import RoleSelect from '@/components/roleSelect/index.vue' //jeeplus
import UserSelect from '@/components/userSelect/index.vue' //jeeplus
import { is } from 'jeeplus-bpmn/lib/util/ModelUtil'
import {toRaw} from 'vue'
export default {
  props: {
    element: {
      type: Object,
      default: undefined
    },
    bpmnModeler: {
      type: Object,
      default: undefined
    }
  },
  components: {
    UserSelect,
    RoleSelect
  },
  data () {
    return {
      radio: '1',
      candidateStarterUsers: '',
      candidateStarterGroups: ''
    }
  },
  computed: {
    enable () {
      if (this.element && is(this.element, 'bpmn:Process')) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {
    radio: {
      handler (newVal) {
        if (newVal === '1') {
          this.candidateStarterGroups = ''
          this.candidateStarterUsers = ''
        }
      },
      immediate: false,
      deep: false
    },
    candidateStarterUsers: {
      handler (newVal) {
        if (this.element) {
          this.bpmnModeler.get('modeling').updateProperties(toRaw(this.element), { candidateStarterUsers: newVal })
        }
      },
      deep: false
    },
    'element.businessObject.candidateStarterUsers': {
      handler (newVal) {
        this.candidateStarterUsers = newVal
        if (this.candidateStarterUsers) {
          this.radio = '2'
        }
      },
      immediate: true,
      deep: false
    },
    candidateStarterGroups: {
      handler (newVal) {
        if (this.element) {
          this.bpmnModeler.get('modeling').updateProperties(toRaw(this.element), { candidateStarterGroups: newVal })
        }
      },
      deep: false
    },
    'element.businessObject.candidateStarterGroups': {
      handler (newVal) {
        this.candidateStarterGroups = newVal
        if (this.candidateStarterGroups) {
          this.radio = '2'
        }
      },
      immediate: true,
      deep: false
    }
  }
}
</script>
